<template>
  <div class="ssh-terminal-page">
    <!-- 右上角关闭按钮 -->
    <div class="page-close-btn">
      <el-button @click="goBack" class="close-button">
        <i class="fa fa-times"></i>
      </el-button>
    </div>
    <!-- 错误状态 -->
    <div v-if="error" class="error-container glass-dialog">
      <div class="error-content">
        <!-- 安全访问错误 -->
        <div v-if="isSecurityError" class="security-error">
          <div class="security-icon">
            <i class="fa fa-shield-alt"></i>
          </div>
          <h2 class="security-title">🔒 安全访问限制</h2>
          <div class="security-message">
            <p class="main-message">{{ error }}</p>
            <div class="security-details">
              <h4><i class="fa fa-info-circle"></i> 为什么会出现这个提示？</h4>
              <ul class="security-reasons">
                <li><i class="fa fa-check"></i> 为了保护服务器安全，SSH终端不允许通过URL直接访问</li>
                <li><i class="fa fa-check"></i> 所有SSH连接都需要通过安全令牌验证</li>
                <li><i class="fa fa-check"></i> 访问令牌具有5分钟的有效期限制</li>
              </ul>

              <h4><i class="fa fa-lightbulb"></i> 如何正确访问SSH终端？</h4>
              <ol class="access-steps">
                <li><i class="fa fa-arrow-right"></i> 前往 <strong>主机管理</strong> 或 <strong>连接管理</strong> 页面</li>
                <li><i class="fa fa-arrow-right"></i> 找到您要连接的主机</li>
                <li><i class="fa fa-arrow-right"></i> 点击 <strong>SSH连接</strong> 按钮</li>
                <li><i class="fa fa-arrow-right"></i> 系统将自动验证权限并生成安全令牌</li>
              </ol>
            </div>
          </div>
          <div class="security-actions">
            <el-button type="primary" @click="goToHostManagement" class="action-btn">
              <i class="fa fa-server"></i> 前往主机管理
            </el-button>
            <el-button type="success" @click="goToConnections" class="action-btn">
              <i class="fa fa-plug"></i> 前往连接管理
            </el-button>
            <el-button @click="goBack" class="action-btn">
              <i class="fa fa-arrow-left"></i> 返回上页
            </el-button>
          </div>
        </div>

        <!-- 普通错误 -->
        <div v-else class="general-error">
          <i class="el-icon-warning-outline error-icon"></i>
          <h3>加载失败</h3>
          <p>{{ error }}</p>
          <div class="error-actions">
            <el-button type="primary" @click="loadHostInfo">重试</el-button>
            <el-button @click="goBack">返回</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- SSH终端 -->
    <NewSSHTerminal
      v-if="hostInfo && !error"
      :hostInfo="hostInfo"
      :accessToken="accessToken"
      :key="hostInfo.id" />
  </div>
</template>

<script setup>
import NewSSHTerminal from '@/components/NewSSHTerminal.vue'
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const hostInfo = ref(null)
const error = ref(null)
const isSecurityError = ref(false)
const accessToken = ref(null)

const loadHostInfo = async () => {
  try {
    error.value = null
    isSecurityError.value = false

    const hostId = route.params.id
    if (!hostId) {
      throw new Error('缺少主机ID参数')
    }

    // 验证访问令牌
    const token = route.query.token
    if (!token) {
      isSecurityError.value = true
      throw new Error('缺少访问令牌，请通过正确的方式访问SSH终端')
    }

    // 设置访问令牌
    accessToken.value = token

    // 验证令牌有效性
    try {
      const tokenResponse = await axios.post('/api/ssh/validate-token/', {
        token: token,
        host_id: hostId
      })

      if (!tokenResponse.data.valid) {
        isSecurityError.value = true
        throw new Error(tokenResponse.data.message || '访问令牌无效')
      }
    } catch (tokenError) {
      isSecurityError.value = true
      if (tokenError.response && tokenError.response.status === 401) {
        throw new Error('访问令牌已过期，请重新申请访问权限')
      } else if (tokenError.response && tokenError.response.status === 403) {
        throw new Error('访问令牌与当前用户或主机不匹配')
      } else {
        throw new Error('令牌验证失败：' + (tokenError.message || '未知错误'))
      }
    }

    // 获取主机详细信息
    const response = await axios.get(`/api/hosts/${hostId}/`)

    if (response && response.data) {
      hostInfo.value = response.data
    } else {
      throw new Error('获取主机信息失败')
    }

  } catch (err) {
    console.error('加载主机信息失败:', err)
    error.value = err.message || '加载主机信息失败'
    // 确保在错误状态下不加载主机信息
    hostInfo.value = null
  }
}

const goBack = () => {
  router.go(-1)
}

const goToHostManagement = () => {
  router.push('/cmdb/hosts')
}

const goToConnections = () => {
  router.push('/cmdb/connections')
}

onMounted(async () => {
  await loadHostInfo()
})
</script>

<style scoped>
.ssh-terminal-page {
  height: 100vh;
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
  overflow: hidden;
}

/* 右上角关闭按钮 */
.page-close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
}

.close-button {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.close-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(255, 182, 193, 0.1) 0%,
    rgba(255, 160, 160, 0.15) 50%,
    rgba(255, 105, 105, 0.1) 100%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 182, 193, 0.4) !important;
  color: rgba(255, 182, 193, 0.9) !important;
  transform: scale(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 6px 20px rgba(0, 0, 0, 0.15),
    0 0 15px rgba(255, 182, 193, 0.2) !important;
}

.close-button:hover::before {
  opacity: 1;
}

.close-button:active {
  transform: scale(0.98) !important;
  transition: transform 0.1s ease !important;
}

.close-button i {
  font-size: 16px !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color 0.3s ease !important;
}

.error-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.error-content {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  padding: 25px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 700px;
  max-height: 85vh;
  margin: auto;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.error-content:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(0, 234, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.error-icon {
  font-size: 4em;
  color: #ff4757;
  margin-bottom: 20px;
}

.error-content h3 {
  margin: 20px 0 10px 0;
  color: #ff4757;
}

.error-content p {
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.7);
}

.error-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 安全错误样式 */
.security-error {
  text-align: left;
}

.security-icon {
  text-align: center;
  margin-bottom: 15px;
}

.security-icon i {
  font-size: 40px;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.security-title {
  text-align: center;
  color: #ffd700;
  font-size: 22px;
  margin-bottom: 18px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  font-weight: 600;
}

@keyframes pulse-glow {
  from {
    text-shadow:
      0 0 20px rgba(255, 215, 0, 0.8),
      0 0 40px rgba(255, 215, 0, 0.4);
  }
  to {
    text-shadow:
      0 0 30px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 215, 0, 0.6);
  }
}

.main-message {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  color: #ffd700;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 16px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 215, 0, 0.2);
  transition: all 0.3s ease;
}

.main-message:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow:
    0 6px 20px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 215, 0, 0.3);
}

.security-details {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.security-details h4 {
  color: #00eaff;
  font-size: 14px;
  margin: 15px 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
}

.security-details h4:first-child {
  margin-top: 0;
}

.security-details h4 i {
  color: #00eaff;
  text-shadow: 0 0 5px rgba(0, 234, 255, 0.5);
}

.security-reasons,
.access-steps {
  margin: 15px 0;
  padding-left: 0;
}

.security-reasons li,
.access-steps li {
  list-style: none;
  margin: 6px 0;
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.security-reasons li:hover,
.access-steps li:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 234, 255, 0.2);
  transform: translateX(5px);
}

.security-reasons li i {
  color: #51cf66;
  margin-top: 2px;
  flex-shrink: 0;
  text-shadow: 0 0 5px rgba(81, 207, 102, 0.5);
}

.access-steps li i {
  color: #74c0fc;
  margin-top: 2px;
  flex-shrink: 0;
  text-shadow: 0 0 5px rgba(116, 192, 252, 0.5);
}

.access-steps li strong {
  color: #00eaff;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.4);
  font-weight: 600;
}

.security-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
}

.action-btn {
  position: relative !important;
  background: linear-gradient(45deg, #00eaff, #0099cc) !important;
  border: none !important;
  color: white !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  min-width: 120px !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: initial !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  background: linear-gradient(45deg, #00d4ff, #0088bb) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 234, 255, 0.4) !important;
  color: white !important;
}

.action-btn:focus,
.action-btn:active {
  background: linear-gradient(45deg, #00eaff, #0099cc) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transform: none !important;
}

.action-btn i {
  margin-right: 6px !important;
  font-size: 14px !important;
}

.action-btn span {
  color: white !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* 不同类型按钮的特定样式 */
.action-btn.el-button--primary {
  background: linear-gradient(45deg, #409eff, #337ecc) !important;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3) !important;
}

.action-btn.el-button--primary::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.action-btn.el-button--primary:hover {
  background: linear-gradient(45deg, #66b1ff, #409eff) !important;
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.5) !important;
}

.action-btn.el-button--primary:focus,
.action-btn.el-button--primary:active {
  background: linear-gradient(45deg, #409eff, #337ecc) !important;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3) !important;
}

.action-btn.el-button--success {
  background: linear-gradient(45deg, #67c23a, #529b2e) !important;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3) !important;
}

.action-btn.el-button--success::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.action-btn.el-button--success:hover {
  background: linear-gradient(45deg, #85ce61, #67c23a) !important;
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.5) !important;
}

.action-btn.el-button--success:focus,
.action-btn.el-button--success:active {
  background: linear-gradient(45deg, #67c23a, #529b2e) !important;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3) !important;
}

.action-btn.el-button--default {
  background: linear-gradient(45deg, #909399, #73767a) !important;
  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3) !important;
}

.action-btn.el-button--default::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.action-btn.el-button--default:hover {
  background: linear-gradient(45deg, #a6a9ad, #909399) !important;
  box-shadow: 0 6px 20px rgba(144, 147, 153, 0.5) !important;
}

.action-btn.el-button--default:focus,
.action-btn.el-button--default:active {
  background: linear-gradient(45deg, #909399, #73767a) !important;
  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3) !important;
}

/* 重置Element Plus的默认状态样式 */
.action-btn.is-disabled,
.action-btn.is-loading,
.action-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.action-btn.is-disabled:hover,
.action-btn.is-loading:hover,
.action-btn:disabled:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 确保按钮内容的样式 */
.action-btn .el-button__text,
.action-btn .el-button__icon {
  color: white !important;
}

/* 移除Element Plus的默认边框和轮廓 */
.action-btn,
.action-btn:focus,
.action-btn:hover,
.action-btn:active {
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .loading-content,
  .error-content {
    padding: 20px;
    margin: 10px;
  }

  .security-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .action-btn {
    width: 100% !important;
    min-width: auto !important;
    margin-bottom: 0;
  }

  .security-title {
    font-size: 20px;
  }

  .security-icon i {
    font-size: 36px;
  }
}
</style>
